<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Fortune Cookie!</title>

    <link rel="stylesheet" href="fortunecookie.css" />
    <link rel="stylesheet" href="slider.css" />
    <script type="text/javascript" src="js/jquery-1.2.1.js"></script>
    <script type="text/javascript" src="js/slider.js"></script>
    <script type="text/javascript" src="js/fortunecookie.js"></script>

  </head>

  <body>

    <center><h1>Fortune Cookie!</h1></center>
    <!--
    <input type="button" onClick="gotoSpot(30)" value="Goto 30 seconds">
    <input type="button" onClick="gotoSpot(600)" value="Goto 10 min">
    <input type="button" onClick="displaySpecs()" value="Find the size">
    <br>
    -->

    <a href="#" onclick="createPlayerWindow('player.html')">Open the player window</a>

    <p/>

    <input type="button" id="pausebutton" onClick="pauseMovie()" value="Play/Pause" />

    Domain: <input id="domain" type=text size=20 value="http://fortunecookie.stanford.edu/videos/">
    Video Name: <input id="vidName" type=text size=20 value="s1.flv">
      <input type="button" onClick="switchVideoButton()" value="Load Video">
      <input type="button" onClick="gotoTimePrompt()" value="Go to time...">
    <br>


    <div id='content'></div>

    <!-- http://carpe.ambiprospect.com/slider/ -->


    <div class="carpe_horizontal_slider_display_combo">
      <div class="carpe_slider_display_holder" style="visibility: hidden; width: 0px;">
	<!-- Default value: 0 -->
	<input class="carpe_slider_display" id="scrubberDisplay" type="text" value="0" from="0" to="800"/>
      </div>
      <div class="carpe_horizontal_slider_track" style="width: 820; background-color: #FFFFFF; border: none">
	<div class="carpe_slider_slit" style="width:800; border: none">&nbsp;</div>
	<div class="carpe_slider" id="scrubber" display="scrubberDisplay" distance="800" style="border: solid 1px">&nbsp;</div>
      </div>
      Time: <span id="time">0:00</span></p>
    </div>

    <p>
    <div id=specs> 
      Researcher: <input id="researcher" type=text size=20 value="nobody">
    </div>

    <div style="clear: both">
      <table border="0" cellpadding="10">

	<tr>

	  <td valign="top">

	    <table border="0" cellpadding="5">
	      <tr>
		<td valign="top">
		  
      <!-- VERY IMPORTANT THAT THE BORDER AND BUTTON ID NAMES MATCH,
      MODULO THE '_border' SUFFIX!!! -->

      <p/>Part:
		  
		  <div class="buttonborder" id="Model_border">
		    <input type="button" id="Model" class="partbutton" value="Model" />
		  </div>

		  <div class="buttonborder" id="View_border">
		    <input type="button" id="View" class="partbutton" value="View" />
		  </div>

		  <div class="buttonborder" id="Controller_border">
		    <input type="button" id="Controller" class="partbutton" value="Controller" />
		  </div>

		  <div class="buttonborder" id="Foundation_border"> <input type="button" id="Foundation" class="partbutton" value="Foundation" />
		  </div>

		</td>
	      </tr>

	      <tr>
		<td valign="top">

      <!-- VERY IMPORTANT THAT THE BORDER AND BUTTON ID NAMES MATCH,
      MODULO THE '_border' SUFFIX!!! -->

      <p/>Activity:

		  <div class="buttonborder" id="AddNewFunctionality_border">
		    <input type="button" id="AddNewFunctionality" class="activitybutton" value="Adding new functionality" />
		  </div>

		  <div class="buttonborder" id="Testing_border">
		    <input type="button" id="Testing" class="activitybutton" value="Testing" />
		  </div>

		  <div class="buttonborder" id="Debugging_border">
		    <input type="button" id="Debugging" class="activitybutton" value="Debugging" />
		  </div>

		  <div class="buttonborder" id="SearchingReadingWeb_border">
		    <input type="button" id="SearchingReadingWeb"
        class="activitybutton" value="Searching/reading on web" />
		  </div>

		  <div class="buttonborder" id="SensemakingInExistingCode_border">
		    <input type="button" id="SensemakingInExistingCode" class="activitybutton" value="Sensemaking in existing code" />
		  </div>

		  <div class="buttonborder" id="ToolSetup_border">
		    <input type="button" id="ToolSetup" class="activitybutton" value="Setting up tools" />
		  </div>

		  <div class="buttonborder" id="Planning_border">
		    <input type="button" id="Planning" class="activitybutton" value="Planning" />
		  </div>


		  <div class="buttonborder" id="InteractWithResearcher_border">
		    <input type="button" id="InteractWithResearcher" class="activitybutton" value="Interacting w/ researcher" />
		  </div>

		  <div class="buttonborder" id="Other_border">
		    <input type="button" id="Other" class="activitybutton" value="Other" />
		  </div>

		</td>
	      </tr>
	    </table>

	  </td>

	  <td valign="top" width="280px">

      <p/>Execution-related events:

      <div class="buttonborder">
	      <input type="button" id="FixBug" class="eventbutton"
		     value="Fix bug" />
	    </div>

      <div class="buttonborder">
	      <input type="button" id="GiveUpOnBugOrTryNewApproach" class="eventbutton"
		     value="Give up on bug / Trying new approach" />
	    </div>

      <div class="buttonborder">
	      <input type="button" id="InsertPrintStmt" class="eventbutton"
		     value="Insert print statement" />
	    </div>

      <div class="buttonborder">
	      <input type="button" id="UnsureOfWhatsExecuting" class="eventbutton"
		     value="Think code is executing (or unsure) but it's not" />
	    </div>


      <p/>Web interaction events:

      <div class="buttonborder">
	      <input type="button" id="WebSearch" class="eventbutton"
		     value="Performing web search (put terms & goal in comment)" />
	    </div>

      <div class="buttonborder">
	      <input type="button" id="WebReadingOfficialDoc" class="eventbutton"
		     value="Reading official web documentation" />
	    </div>

      <div class="buttonborder">
	      <input type="button" id="WebReadingTutorial" class="eventbutton"
		     value="Reading tutorial webpage" />
	    </div>

      <div class="buttonborder">
	      <input type="button" id="WebReadingForumOrBlog" class="eventbutton"
		     value="Reading web forum or blog" />
	    </div>

      <div class="buttonborder">
	      <input type="button" id="WebReadingPageWithFeature" class="eventbutton"
		     value="Reading a webpage containing desired feature" />
	    </div>


      <p/>Code foraging events:

      <div class="buttonborder">
	      <input type="button" id="CopyCode" class="eventbutton"
		     value="Copy code (put source & num. lines in comment)" />
	    </div>

      <div class="buttonborder">
	      <input type="button" id="SearchInOwnCode" class="eventbutton"
		     value="Searching in own code (put goal in comment)" />
	    </div>


      <p/>Other (usually verbal) events:

      <div class="buttonborder">
	      <input type="button" id="MakingLanguageAnalogy" class="eventbutton"
		     value="Making an analogy to another language" />
	    </div>

      <div class="buttonborder">
	      <input type="button" id="Satisficing" class="eventbutton"
		     value="Satisficing ('probably a better way but whatever')" />
	    </div>

      <div class="buttonborder">
	      <input type="button" id="NotSatisficing" class="eventbutton"
		     value="Not satisficing ('i gotta do it the right way')" />
	    </div>

      <div class="buttonborder">
	      <input type="button" id="LearningByDoing" class="eventbutton"
		     value="Learning by doing" />
	    </div>

      <div class="buttonborder">
	      <input type="button" id="LanguageSpecificConfusion" class="eventbutton"
		     value="Language-specific confusion" />
	    </div>


      <div class="buttonborder">
	      <input type="button" id="Procrastination" class="eventbutton"
		     value="Procrastination" />
	    </div>

	  </td>

	  <td valign="top">
      <div id="tagtable_title"></div>

	    <div id="tagtable">&nbsp;</div>

	  </td>


      </table>
    </div>

  </body>
</html>
